<template>
	<view v-if="logined">
		
		<view class="u-flex user-box u-p-l u-p-r-20 u-p-b">
			<view class="u-m-r-10">
				<u-avatar :src="pic" size="150"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20"> {{yonghu.xingming}}</view>
				<view class="u-font-14 u-tips-color">{{yonghu.age}}岁</view>
			</view>
		
		</view>
		
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="../../static/我的.png" title="我的"@click ='wode'></u-cell-item>
				<u-cell-item icon="star" title="收藏"@click ='shoucang'></u-cell-item>
				<u-cell-item icon="../../static/关注.png" title="关注"@click ='guanzhu'></u-cell-item>
			
			</u-cell-group>
		
		
		</view>
		<view class="u-m-t-20" >
			<u-cell-group>
				<u-cell-item icon="../../static/退出.png" title="退出"@click ='quit'></u-cell-item>
				<u-cell-item icon="../../static/修改信息.png" title="修改信息"@click ='change'></u-cell-item>
				<u-cell-item icon="../../static/注销.png" title="注销"@click ='logoff'></u-cell-item>
			</u-cell-group>
		</view>
	</view>
	<view class="u-m-t" v-else>
		<view class="content">
				<view class="zr">
					<view class="water">
						<view class="water-c">
							<view class="water-1"> </view>
							<view class="water-2"> </view>
						</view>
					</view>
				</view>
			</view>

		<view class="center">
			<image src="../../static/发布.png" style="width: 150px; height: 200px" mode="widthFix" class="cover-image"></image>
		</view>
		<view class="mybutton">
		<u-button class="mybutton1"@click="gologin()" >登录</u-button>
		</view>
		


	
		
	</view>
	
	
</template>

<script>
	export default {
		data() {
			return {
				pic:'../../static/taffy.png',
				show:true,
			    logined:true,
				yonghu:{xingming:"游客",age:0}
			}
		},
		onLoad() {
			
		},
		//当页面展示的时候会调用
		onShow(){
			
			//1.获取存储的用户信息
			const value = uni.getStorageSync("user");
			//把数据赋值给用户这个变量
		     	this.yonghu = value;
			console.log(value);
			//2.判断是否存在，如果不存在logined赋值为false,如果存在赋值为true
			if(value){
				this.logined =true;
			}else{
				this.logined=false;
			}
		},
		methods: {
			gologin(){
				uni.navigateTo({
					url:'/pages/XJX_pages/login'
				})
			},
			logoff(){
			let that=this
						uni.showModal({
								title: '提示：',
								content: '请确认是否要注销账户?',
								success: function(res) {
									if (res.confirm) {
										 console.log('确定注销');
								     	uni.request({
								     		url:"http://localhost:8080/dianyings",
								     		success:(res)=>{
								     			console.log(res);
								     			//更新电影集合
								     	       	this.dianyings=res.data.result;
								     		}
								     	}) 
										
										this.logined=false;
										uni.navigateTo({
											url:'/pages/XJX_pages/login'
										})
									} else if (res.cancel) {
										// console.log('取消');
										//TODO
									}
								}
						});
			
			},
			change(){
				uni.navigateTo({
					url:'/pages/XJX_pages/shoucang'
				})
			},
			wode(){
				uni.navigateTo({
					url:'/pages/XJX_pages/wode'
				})
			},
			shoucang(){
				uni.navigateTo({
					url:'/pages/XJX_pages/shoucang'
				})
			},
			guanzhu(){
				uni.navigateTo({
					url:'/pages/XJX_pages/guanzhu'
				})
			},
			//退出
			quit(){
				uni.setStorageSync("user","");//清空存储
				//修改登陆状态
				this.logined=false
			}
		}
	}
</script>

<style lang="scss">
	.center {
	        flex: auto;
	        display: flex;
	        flex-direction: column;
	        justify-content: center;
	        align-items: center;
	        background-color: white;
			height: 300px;
	    }

page{
	background-color: #ededed;
}

.camera{
	width: 54px;
	height: 44px;
	
	&:active{
		background-color: #ededed;
	}
}
.user-box{
	background-color: #fff;
}
.mybutton1{

	background-color:#8dc63f;
       width: 250px;
		height: 40px;
	
	

}
.mybutton{

	
	flex: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: white;
	height: 243px;
}
.zr {
		color: white;
		background: #8dc63f;
		width: 100%;
		height: 60upx;
		position: relative;
	}

	.water {
		position: absolute;
		left: 0;
		bottom: -10upx;
		height: 30upx;
		width: 100%;
		z-index: 1;
	}

	.water-c {
		position: relative;
	}

	.water-1 {
		background: url("") repeat-x;
		background-size: 600upx;
		animation: wave-animation-1 4.5s infinite linear;
	}

	.water-2 {
		top: 5upx;
		background: url("") repeat-x;
		background-size: 600upx;
		animation: wave-animation-2 8s infinite linear;
	}

	.water-1,
	.water-2 {
		position: absolute;
		width: 100%;
		height: 60upx;
	}

	.back-white {
		background: #fff;
	}

	@keyframes wave-animation-1 {
		0% {
			background-position: 0 top;
		}

		100% {
			background-position: 600upx top;
		}
	}

	@keyframes wave-animation-2 {
		0% {
			background-position: 0 top;
		}

		100% {
			background-position: 600px top;
		}
	}

	
</style>
